<template>
  <div class="module">
    <MTitle ref="title" icon="sxfx" @search="initData"></MTitle>
    <MBox>
      <MTabs :list="list" :activeIndex="activeIndex" @change="tabChange"></MTabs>
      <div class="echart" ref="echart"></div>
    </MBox>
  </div>
</template>

<script>
import MTitle from "../base-com/m-title/m-title";
import MBox from "../base-com/m-box/m-box";
import MTabs from '../base-com/m-tabs/m-tabs'
import * as echarts from "echarts";
import {agingAnalysis} from '@/api/warnings'
import {shipMixin} from '../../mixins/mixin'

export default {
  mixins: [shipMixin],
  components: {
    MTitle,
    MBox,
    MTabs,
  },
  data() {
    return {
      activeIndex: 0,
      list: [
        {
          name: '确警时效',
          value: 'confirm',
        },
        {
          name: '处理时效',
          value: 'processed',
        },
      ],
      echart: null,
      option: {},
      dataAll: {
        confirm: [],
        processed: []
      }
    };
  },
  methods: {
    shipChange() {
      this.initData();
    },
    initData() {
      const searchData = this.$refs.title.getForm()
      searchData.shipId = this.shipId
      agingAnalysis(searchData).then(res => {
        const result = res.result || {
          confirm: [],
          processed: []
        }
        result.confirm.sort((value1, value2) => {
          let a = value1.count
          let b = value2.count
          return a < b ? 1 : a > b ? -1 : 0
        })
        result.processed.sort((value1, value2) => {
          let a = value1.count
          let b = value2.count
          return a < b ? 1 : a > b ? -1 : 0
        })
        this.dataAll = result
        this.initChart();
      })
    },
    tabChange(index) {
      this.activeIndex = index
      this.initChart();
    },
    initChart() {
      const data = this.dataAll[this.list[this.activeIndex].value].slice(0, 5)
      const xdata = []
      const yData1 = []
      data.forEach(item => {
        xdata.push(item.name)
        yData1.push(item.count)
      })
      if (!this.echart) {
        this.echart = echarts.init(this.$refs.echart);
      }
      var barWidth = 20;
      var symbolSize = [barWidth, 10];
      var symbolOffsetT = [0, -5];

      var normalColor = "#c9c9c9";
      var fontSize = 12;
      var datas = {
        xdata,
        yData1
      };
      this.option = {
        animation: false, //去除加载时缓动动画
        grid: {
          top: 35,
          left: 40,
          right: 0,
          bottom: 50
        },
        tooltip: {
          formatter: params => {
            return `${params.name}<br/>` +
              `<span style="display:inline-block;margin-right:5px;border-radius:10px;width:10px;height:10px;background-color:#00C6FF;"></span>` +
              `${params.value}`;
          }
        },
        xAxis: {
          data: datas.xdata,
          color: '#fff',
          axisTick: {
            show: false
          },
          axisLabel: {
            margin: 15,
            // align: 'bottom',
            interval: 0,
            color: '#fff',
            textStyle: {
              fontSize: 12
            },
            rotate: 10,
            // formatter: function (value) {
            //   return value.split("").join("\n");
            // }
          },
          type: 'category',
        },
        yAxis: [
          {
            nameTextStyle: {
              align: 'right'
            },
            type: 'value',
            minInterval: 1,
            axisLine: {
              show: false,
              lineStyle: {
                color: '#ffff'
              }
            },
            axisTick: {
              show: false,
              lineStyle: {
                color: '#333'
              }
            },
            splitLine: {
              show: true,
              lineStyle: {
                color: '#20243D'
              }
            },
            axisLabel: {
              textStyle: {
                color: '#fff', // 坐标值得具体的颜色
                fontSize: 12
              }
            }
          },
          {

            type: "value",
            // name: "%",
            nameTextStyle: {
              fontSize: fontSize,
            },
            color: normalColor,
            axisTick: {
              show: false,
            },
            splitLine: {
              show: false,
            },
            axisLabel: {
              formatter: "{value}%",
              textStyle: {
                color: normalColor,
                fontSize: fontSize,
              },
            },
            axisLine: {
              lineStyle: {
                color: normalColor,
              },
            },
          },
          {

            type: "value",
            gridIndex: 0,
            min: 50,
            max: 100,
            splitNumber: 8,
            splitLine: {
              show: false,
            },
            axisLine: {
              show: false,
            },
            axisTick: {
              show: false,
            },
            axisLabel: {
              show: false,
            },
            splitArea: {
              show: true,
              areaStyle: {
                color: ["rgba(250,250,250,0.0)", "rgba(250,250,250,0.05)"],
              },
            },
          },
        ],
        series: [
          {
            // 柱子
            tooltip: {
              show: true,
            },
            type: "bar",
            barWidth: barWidth, //柱子宽度
            barGap: 0.5, //柱子之间间距
            emphasis: {
              itemStyle: {
                //填充部分鼠标移上去颜色
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#21E8FF",
                  },
                  {
                    offset: 1,
                    color: "rgba(30, 145, 158, 0.35)",
                  },
                ]),
              },
            },
            label: {
              show: true,
              position: "top",
              padding: 10,
              formatter: ({value}) => `${value}次`,
              textStyle: {
                fontSize: fontSize,
                color: '#fff',
              },
            },
            itemStyle: {
              normal: {
                color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
                  {
                    offset: 0,
                    color: "#21E8FF",
                  },
                  {
                    offset: 1,
                    color: "rgba(30, 145, 158, 0.35)",
                  },
                ]),
              },
            },
            data: datas.yData1,
            // barGap: 0,
            legendHoverLink: false,
          },
          {
            // 柱子头部椭圆

            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "#21E8FF",
                borderWidth: 0,
                // borderColor: '#94EFFF'
              },
            },
            symbolRotate: 0,
            symbolSize: symbolSize,
            symbolOffset: symbolOffsetT,
            symbolPosition: "end",
            data: datas.yData1,
            z: 3,
          },
          {
            // 柱子底部椭圆

            tooltip: {
              show: false,
            },
            type: "pictorialBar",
            itemStyle: {
              normal: {
                color: "rgba(30, 145, 158, 0.35)",
                borderWidth: 0,
                borderColor: "#94EFFF",
              },
            },
            symbolRotate: 0,
            symbolSize: symbolSize,
            // symbolSize: [30, 8],
            symbolOffset: [0, 5],
            // symbolOffset: symbolOffsetT,
            symbolPosition: "start",
            data: datas.yData1,
            z: 3,
          },
        ],
      };

      this.echart.setOption(this.option);
    },
  },
};
</script>

<style scoped lang="scss">
.echart {
  width: 100%;
  height: 100%;
}
</style>
